import { Component, OnInit, Input, Output,SimpleChanges ,ElementRef,ViewChild,ViewEncapsulation,EventEmitter} from '@angular/core';

@Component({
  selector: 'el-radio',
  template: `
  <label #self class="el-radio">
    <span  #radio_input class="el-radio__input">
      <span class="el-radio__inner"></span>
      <input  #radio class="el-radio__original" [value]="label" type="radio" (change)='handleChange()'  (focus)="handleFocus()" (blur)="handleBlur()" [name]="name" [disabled]="isDisabled">
    </span>
    <span class="el-radio__label">
      <ng-content></ng-content>
      
    </span>
  </label>
  `,
  styleUrls: ['./el-radio.component.css','./radio.css'],
  encapsulation:ViewEncapsulation.None
})
export class ElRadioComponent implements OnInit {

    

    // @Input() value:any={};
    @Input() label:string|number;
    @Input() disabled:boolean;
    @Input() name:string;

    @Input() model:string|number;
    @Output() modelChange:EventEmitter<any>=new EventEmitter<any>();

    @ViewChild('self') self:ElementRef;
    @ViewChild('radio_input') radio_input:ElementRef;
    @ViewChild('radio') radio:ElementRef;

    private isChecked:boolean=false;
    focus:boolean=false;
    isGroup:boolean;
    isDisabled:boolean;
    _radioGroup:any
    constructor() { }

    ngOnInit() {
        this.getIsGroup();

    }
    ngOnChanges(changes:SimpleChanges){
        // console.log(changes)
        if(changes['model']){
            if(changes['model'].currentValue===this.label){
                this.radio.nativeElement.checked=true;
                this.isChecked=true
            }else{
                this.radio.nativeElement.checked=false;
                
            }
        };
        if(changes['disabled']){
            this.getDisabled();
        }

        this.setClass()
    }
    // handleClick(e){}
    handleChange(e){
        // console.log(e)
        if(this.radio.nativeElement.checked){
            this.model=this.label;
            this.modelChange.emit(this.model)
        }
    }
    handleFocus(){
        this.focus=true;
        const className= this.radio_input.nativeElement.className;
        if(className.indexOf('is-focus')===-1){
            this.radio_input.nativeElement.className=className+' is-focus'
        }
    }
    handleBlur(){
        this.focus=false;
        let className= this.radio_input.nativeElement.className;
        className=className.replace('is-focus','');
        this.radio_input.nativeElement.className=className
    }

    setClass(){
        const classList=['el-radio__input'];
        if(this.isDisabled){
            classList.push('is-disabled');
        }
        if(this.model===this.label){
            classList.push('is-checked');
        }
        if(this.focus){
            classList.push('is-focus')
        }
        this.radio_input.nativeElement.className=classList.join(' ')
    }

    getIsGroup(){
        let parent=this.self.nativeElement.parentNode;

        while(parent){
            if(parent.tagName==='EL-RADIO-GROUP'){
                this._radioGroup=parent;
                this.isGroup= true;
                return;
            }else{
                parent=parent.parentNode
            }
        }
        this.isGroup=false;
    }

    getDisabled(){
        this.isDisabled= this.isGroup?this._radioGroup.disabled||this.disabled:this.disabled
    }


    

}
